<!--
 * @Author: yanjikun
 * @Date: 2022-04-12 16:56:17
 * @LastEditors: yanjikun
 * @LastEditTime: 2022-04-26 16:31:38
 * @Description: file content
-->
<template>
  <div class="w-100%">
    <Spin :spinning="loading" v-bind="props">
      <div ref="basicChartRef" class="chart" v-show="enableShow"></div>
      <Empty v-show="!enableShow" />
    </Spin>
  </div>
</template>

<script setup lang="ts">
import { Spin, Empty } from 'ant-design-vue'
import { onMounted } from 'vue'
import { basicChartProps } from './basic-chart'
import { useChartMethods } from './hooks/useChartMethods'
import { useChartState } from './hooks/useChartState'
import { ChartEmitType } from './types/chart'
defineOptions({
  name: 'BasicChart'
})
interface emitType extends ChartEmitType {}
const props = defineProps(basicChartProps)
const emit = defineEmits<emitType>()
const chartState = useChartState({ props })
const { loading, enableShow, basicChartRef } = chartState
const chartMethods = useChartMethods({ state: chartState, props })
const { fetchData } = chartMethods
onMounted(() => {
  props.immediate && fetchData()
  emit('register', chartMethods)
})
</script>

<style scoped lang="less">
.chart {
  height: 100%;
  width: 100%;
}

:deep(.ant-spin-nested-loading) {
  height: 100%;

  .ant-spin-container {
    height: 100%;

    .ant-empty {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
